﻿@using QDT.Core
@using QDT.MVC
@using QDT.Web
@model QDT.Core.Members.User
@{
    ViewBag.Title = "用户中心";
    var invests = Html.F().GetRecentInvest(Model.ID).OrderBy(x => x.Time);
}
@section Head{
    <style type="text/css">
        .makemoney
        {
            height: 148px;
            margin: 0;
            margin-top: 15px;
            width: 758px;
            font-size: 14px;
        }
        .money_scale span
        {
            margin: 0 10px;
        }
        .money_scale p
        {
            margin-bottom: 20px;
        }
        .money_scale span em
        {
            width: 10px;
            display: inline-block;
            height: 10px;
            margin-right: 5px;
        }
        .money_detail
        {
            border-radius: 5px;
            line-height: 45px;
            text-align: center;
            width: 100%;
        }
        
        .money_detail th
        {
            text-align: center;
            width: 33.3%;
        }
        
        .money_detail thead tr
        {
            font-size: 16px;
        }
        
        .money_detail tbody tr
        {
            border-top: 1px solid #d4d4d4;
        }
        .green-money
        {
            color: #27ae60;
        }
        .jian-money
        {
            color: #ffa313;
        }
        .info-tilte
        {
            height: 40px;
            border: 1px solid #d4d4d4;
            border-bottom: 0;
            width: 363px;
            margin-left: 5px;
            border-radius: 4px 4px 0 0;
            background: #f3f3f3;
        }
        .info-tilte span
        {
            font-size: 13px;
            margin-left: 20px;
            float: left;
            margin-top: 10px;
        }
        .jian-money
        {
            color: #ffaf32;
        }
    </style>
    <!--[if lt IE 9]>
        <script type="text/javascript" src="@Url.Content("~/Content/Default/JS/bootstrap/Chart/excanvas.js")"></script>
    <![endif]-->
}
<div class="ui-body" style="background-color: #fff; padding: 0;">
    @Html.Action("_UserBanner")
    <div class="ui-inner">
        <div class="ui-grid-row">
            @Html.Action("UserMenu", new { route = MenuRoute.AccountOverview })
            <div class="ui-grid-20 makemoney">
                <div style="border: 1px solid #e5e5e5; border-radius: 5px; box-shadow: 0 0 5px #f8f8f8;
                                                                                                                                float: left; height: 130px; width: 44%">
                    <div style="float: left; text-align: left; width: 45%; margin-top: 20px;" class="makemoney">
                        <span>
                            <img src="/Content/Default/Images/Others/makemoney01.png" width="50" height="50"
                                 style="margin-left: 20px;" /></span><br />
                        <span style="display: inline-block; margin-top: 10px; color: #ffaf32;"><em style="font-size: 22px;
                                                                                                                                                                                                                                                                                                                                                                                  margin-left: 20px;">@Model.UserSta.LoadEarnings.ToMoney()</em><em style="font-size: 16px;"></em></span>
                    </div>
                    <div style="float: right; font-size: 14px; line-height: 36px; margin-top: 10px; width: 55%;">
                        <ul>
                            <li><span style="margin-right: 10px;">待收本金</span><span>@Model.UserSta.LoadWaitRepayMoney.ToString("0.00")</span></li>
                            <li><span style="margin-right: 10px;">待收收益</span><span>@Model.UserSta.LoadWaitRepayEarnings.ToString("0.00")</span></li>
                            <li><span style="margin-right: 10px;">累计投资</span><span>@Model.UserSta.TotalLoadMoney.ToString("0.00")</span></li>
                        </ul>
                    </div>
                </div>
                <div style="float: left; margin-left: 26px; width: 50%; line-height: 38px;">
                    <p style="font-size: 18px; width: 100%;">
                        <span style="margin-right: 10px; width: 210px; display: inline-block;"><em style="font-size: 14px;">
                                                                                                   可用余额：</em> <em style="color: #ffaf32">@Model.UserAccount.Money.ToMoney()</em>
                        </span><span class="active" style=""><a href="@Url.Action("MoneyIncharge")" class="ui-button ui-button-red" style="width: 60px;">
                                                                 充值</a> <a href="@Url.Action("MoneyCarry")" class="ui-button ui-button-orange" style="width: 80px;background-color: #ccc;color: #444;">
                                                                            申请提现</a> </span>
                    </p>
                    <span>冻结资金：</span> <span><em>@((Model.UserAccount.LockMoney).ToMoney())</em> </span>
                    <p>
                        <span>账户总资产：</span> <span><em>@((@Model.UserSta.LoadWaitRepayMoney + Model.UserSta.LoadWaitRepayEarnings + Model.UserAccount.Money + Model.UserAccount.LockMoney).ToMoney())</em>
                                            </span>
                    </p>
                </div>
            </div>
            <div class="ui-grid-20" style="height: 335px; margin-top: -12px; width: 758px; text-align: center;">
                <div style="float: left; width: 249px;">
                    <div style="float: left;" class="money_scale">
                        <h3 style="display: inline-block; margin: 20px auto; font-size: 16px;">
                            <b>当前资产配比</b></h3>
                        <p>
                            <span><em style="background-color: #e74c3c;"></em>可用余额</span> <span><em style="background-color: #ffaf32;">
                                                                                                </em>在投资金</span> <span><em style="background-color: #6cd1eb;"></em>冻结资金</span></p>
                        <canvas width="200" height="200" id="doughnutChartCanvas"></canvas>
                    </div>
                </div>
                <div style="float: left; width: 50%; margin-left: 50px; position: relative;">
                    <h3 style="display: inline-block; margin: 20px auto; font-size: 16px;">
                        <b>最近六个月投资额</b></h3>
                    <label style="position: absolute; display: inline-block; top: 70px; left: 0;">
                        投资额(元)
                    </label>
                    <canvas width="450" height="200" id="introChart" style="margin-top: 30px;"></canvas>
                    <p>
                        <span>投资时间(月)</span>
                    </p>
                </div>
            </div>
            <div class="ui-grid-20" style="margin-top: 5px; width: 758px;">
                <div class="info-tilte">
                    <span>账户活动</span><a href="@Url.Action("AllInvestList")" style="float: right;margin-top: 10px;margin-right: 20px;color: #10b4f3;">查看详情</a>
                </div>
                @Html.Action("InvestList", new { id = Model.ID })
                @Html.Action("LogList", new { id = Model.ID })
            </div>
        </div>
    </div>
</div>
<div style="margin-top: -10px;">@Html.Partial("_BindBottomImage")</div>

@section Footer
{
    <script type="text/javascript" src="@Url.Content("~/Content/Default/JS/vendor/modernizr-2.8.0.min.js")"> </script>
    <script src="/Content/Default/JS/bootstrap/Chart/Chart.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        
            $("#User_Allscan").css("background", "#e0524b");
            $("#User_Allscan i,#User_Allscan span").css("color", "white");
            $("#User_Allscan .san-jiaoxing").css("display", "block");

            var lineChartData = {
                labels: [
                    @foreach (var i in invests)
                    {
                        <text>
                            "@i.Time.ToString("yy-MM")",
                        </text>
                    }
                ],
                datasets: [
                    {
                        fillColor: "rgba(255,47,47,0.5)",
                        strokeColor: "rgba(245,79,6,1)",
                        pointColor: "rgba(245,79,6,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(245,79,6,1)",
                        data: [
                            @foreach (var i in invests)
                            {
                                <text>
                                    @i.Money.ToString("0"),
                                </text>
                            }
                        ],
                    }
                ],
            };
   
            var doughnutChartData = [
                {
                    value: @Model.UserAccount.Money,
                    color: "#e74c3c"
                },
                {
                    value : @Model.UserSta.LoadWaitRepayMoney,
                    color: "#ffaf32"
                },
                {
                    value : @Model.UserAccount.LockMoney,
                    color: "#6cd1eb"
                }
				
            ];
				
            var globalGraphSettings = {animation : Modernizr.canvas};
		
            setIntroChart();
            showDoughnutChart();
            function setIntroChart(){		
                var ctx = document.getElementById("introChart").getContext("2d");

                new Chart(ctx).Line(lineChartData, { animation: Modernizr.canvas, scaleShowGridLines: false, bezierCurve: false,scaleFontColor: "#767C8D",});
            };
		
	
            function showDoughnutChart(){
                var ctx = document.getElementById("doughnutChartCanvas").getContext("2d");
                new Chart(ctx).Doughnut(doughnutChartData,globalGraphSettings);
            };
		
            var graphInitDelay = 300;
		
            //Set up each of the inview events here.
		

    </script>
}
